<template>
    <div>
        <h1>{{$route.meta.title}}</h1>
        <!-- 表格部分 -->
        <my-table :tableData="tableData" :data="data"></my-table>
        
        <!-- 分页器部分  -->
        <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { getUserList } from "@/utils/api";
import myTable from "@/components/myTable/myTable";
export default {
    data() {
        return {
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            data: [
                {
                    key: "id",
                    label: "ID",
                },
                {
                    key: "username",
                    label: "用户名",
                },
                {
                    key: "email",
                    label: "邮箱",
                },
                {
                    key: "phone",
                    label: "电话",
                },
                {
                    key: "createTime",
                    label: "注册时间",
                },
            ],
        };
    },
    created() {
        this.getData();
    },
    components: {
        myTable,
    },
    methods: {
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum;
            this.getData();
        },
        getData() {
            getUserList(this.pageNum).then((res) => {
                this.tableData = res.data.data.list;
                this.pageNum = res.data.data.pageNum;
                this.pageSize = res.data.data.pageSize;
                this.total = res.data.data.total;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
</style>